@extends('admin_system/layout/layout')

@section('title')
    学习官中心---banner图设置
@stop

@section('content')
    <br>
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">当前位置:</h4>
            <p class="list-group-item-text"><strong>学习官中心>></strong><strong>banner设置</strong></p>
        </a>
    </div>
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title text-center">banner图片设置</h3>
        </div>
        <div class="panel-body">
            @include('admin_system.studyCenter.bannerAdd',['bookInfo'=>$bookInfo,'mindshare'=>$mindshare])
        </div>
    </div>
    <script>
        $(function () {

            $('#upFile').on('change', function (e) {
                var files = e.target.files;
                if (files && files.length > 0) {
                    var file = files[0];
                    var url = URL.createObjectURL(file);
                    $('#review').attr('src', url);
                }
            });
            var storage = window.localStorage;

            //用户搜索
            $('#search').on('input propertychange', function (e) {
                var str = '';
                var old = $(this).data('data');
                var currentData = e.target.value;
                if (old != currentData && currentData.length >= 2) {
                    $(this).data('data', e.target.value);
                    $.ajax({
                        url: '{{url("/admin_system/study/center/ajaxSearchResponse")}}',
                        type: 'get',
                        dataType: 'json',
                        data: {"query": currentData},
                        sync: false,
                        beforeSend: function () {
//                            console.log('努力加载中...')
                        },
                        success: function (data) {
                            if (data.suggestions.length > 2) {
                                storage.setItem('search', data.suggestions);
                                $.each(JSON.parse(data.suggestions), function (index, item) {
                                    if (index <= 5) {
                                        var patt = eval("/" + currentData + "/g");
                                        var checkdata = item.data;
                                        var res = patt.test(checkdata)
                                        if (res) {
                                            var reg = patt;
                                            var repl = checkdata;
                                            var cc = '<span style="color: red;">' + currentData + '</span>'
                                            var res = repl.replace(reg, cc)
                                            str += '<li onclick="userSelect(this)" lessonsId=' + item.value + ' content=' + item.data + '>' + res + '</li>';
                                        } else {
                                            str += '<li onclick="userSelect(this)" lessonsId=' + item.value + ' content=' + item.data + '>' + item.data + '</li>';
                                        }
                                    }
                                });
                                $('#serarch_preview').empty();
                                $('#serarch_preview').append(str);
                                str = '';
                            }
                        }
                    })
                } else if (currentData.length >= 2) {
                    var suggestions = storage.getItem('search');
                    if (suggestions.length > 2) {
                        $.each(JSON.parse(suggestions), function (index, item) {
                            if (index <= 5) {
                                var patt = eval("/" + currentData + "/g");
                                var checkdata = item.data;
                                var res = patt.test(checkdata)
                                if (res) {
                                    var reg = patt;
                                    var repl = checkdata;
                                    var cc = '<span style="color: red;">' + currentData + '</span>'
                                    var res = repl.replace(reg, cc)
                                    str += '<li onclick="userSelect(this)" lessonsId=' + item.value + ' content=' + item.data + '>' + res + '</li>';
                                } else {
                                    str += '<li onclick="userSelect(this)" lessonsId=' + item.value + ' content=' + item.data + '>' + item.data + '</li>';
                                }
                            }
                        });
                        $('#serarch_preview').empty();
                        $('#serarch_preview').append(str);
                        str = '';
                    }
                }
            });

            //用户点击上传功能
            $('.UpLoad').click(function () {
                //禁止用户重复上传
                $('.UpLoad').attr('disabled', 'disabled').text('正在上传中');

                var file = $('#upFile')[0].files[0];
                var lessons_id = $('#lessonsId').val();
                var _token = $('meta[name="csrf-token"]').attr('content');
                var banner_title = $('#banner_title').val();
                var banner_type = $('#banner_type option:selected').val();
                var content_type = $('#content_type option:selected').val();
                var content_id = $('#content_id').val();
                //FormData对象
                var fd = new FormData();
                fd.append('banner_img', file);
                fd.append('lessons_id', lessons_id);
                fd.append('banner_title', banner_title);
                fd.append('banner_type', banner_type);
                fd.append('content_type', content_type);
                fd.append('content_id', content_id);
                fd.append('_token', _token);
                //XMLHttpRequest()
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {//上传状态
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        $('.UpLoad').removeAttr('disabled').text('上传');
                        $('#progress_show').css('width', '0%');
                        $('.progress').css('display', 'none').delay('slow');
                        $('#lessonsId').val('');
                        $('#search').val('');
                        var res = JSON.parse(xhr.response);
                        if (res.code == 400) {
                            notify_message(res.msg, 'danger');
                        } else if (res.code == 200) {
                            notify_message(res.msg, 'success');
                            window.location.reload();
                        }
                    } else if (xhr.readyState == 0 && xhr.status == 200) {
                        $('.UpLoad').removeAttr('disabled').text('上传');
                        $('#progress_show').css('width', '0%');
                        $('.progress').css('display', 'none').delay('slow');
                        $('#lessonsId').val('');
                        $('#search').val('');
                        notify_message('请求未初始化', 'info');
                    } else if (xhr.readyState == 1 && xhr.status == 200) {
                        $('.UpLoad').removeAttr('disabled').text('上传');
                        $('#progress_show').css('width', '0%');
                        $('.progress').css('display', 'none').delay('slow');
                        $('#lessonsId').val('');
                        $('#search').val('');
                        notify_message('服务器连接已建立', 'info');
                    } else if (xhr.readyState == 2 && xhr.status == 200) {
                        $('.UpLoad').removeAttr('disabled').text('上传');
                        $('#progress_show').css('width', '0%');
                        $('.progress').css('display', 'none').delay('slow');
                        $('#lessonsId').val('');
                        $('#search').val('');
                        notify_message('请求已接收', 'info');
                    } else if (xhr.readyState == 2 && xhr.status == 200) {
                        $('.UpLoad').removeAttr('disabled').text('上传');
                        $('#progress_show').css('width', '0%');
                        $('.progress').css('display', 'none').delay('slow');
                        $('#lessonsId').val('');
                        $('#search').val('');
                        notify_message('请求处理中', 'info');
                    }
                }

                xhr.upload.onprogress = function (e) {//获取进度
                    var loaded = e.loaded;
                    var tot = e.total;
                    var pre = Math.floor(100 * loaded / tot);
                    $('.progress').css('display', 'block');
                    $('.progress-bar').stop().animate({'width': pre + '%'});
//                    console.log(pre);
                }
                xhr.open('post', "{{route('bannerUpload')}}")
                xhr.send(fd);
            });
        })

        var userSelect = function (_this) {
            var lessonsId = $(_this).attr('lessonsid');
            $('#lessonsId').val(lessonsId)
            $('#search').val($(_this).attr('content'))
            $('#serarch_preview').empty();
        }

        function notify_message(message, type) {

            $.notify({
                icon: 'fa fa-paw',
                message: message,
            }, {
                type: type,
                animate: {
                    enter: "animated fadeInDown",
                    exit: "animated fadeOutUp"
                }
            })
        }

        function upload() {
            //禁止用户重复上传
            $('.UpLoad').attr('disabled', 'disabled').text('正在上传中');

            var file = $('#upFile')[0].files[0];
            var lessons_id = $('#lessonsId').val();
            var _token = $('meta[name="csrf-token"]').attr('content');
            //FormData对象
            var fd = new FormData();
            fd.append('banner_img', file);
            fd.append('lessons_id', lessons_id);
            fd.append('_token', _token);
            //XMLHttpRequest()
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {//上传状态
                if (xhr.readyState == 4 && xhr.status == 200) {
                    $('.UpLoad').removeAttr('disabled').text('上传');
                    $('#progress_show').css('width', '0%');
                    $('.progress').css('display', 'none').delay('slow');
                    $('#lessonsId').val('');
                    $('#search').val('');
                    var res = JSON.parse(xhr.response);
                    if (res.code == 400) {
                        upload_banner_message(res.msg, 'danger');
                    } else if (res.code == 200) {
                        upload_banner_message(res.msg, 'success');
                    }
                } else if (xhr.readyState == 0 && xhr.status == 200) {
                    $('.UpLoad').removeAttr('disabled').text('上传');
                    $('#progress_show').css('width', '0%');
                    $('.progress').css('display', 'none').delay('slow');
                    $('#lessonsId').val('');
                    $('#search').val('');
                    upload_banner_message('请求未初始化', 'info');
                } else if (xhr.readyState == 1 && xhr.status == 200) {
                    $('.UpLoad').removeAttr('disabled').text('上传');
                    $('#progress_show').css('width', '0%');
                    $('.progress').css('display', 'none').delay('slow');
                    $('#lessonsId').val('');
                    $('#search').val('');
                    upload_banner_message('服务器连接已建立', 'info');
                } else if (xhr.readyState == 2 && xhr.status == 200) {
                    $('.UpLoad').removeAttr('disabled').text('上传');
                    $('#progress_show').css('width', '0%');
                    $('.progress').css('display', 'none').delay('slow');
                    $('#lessonsId').val('');
                    $('#search').val('');
                    upload_banner_message('请求已接收', 'info');
                } else if (xhr.readyState == 2 && xhr.status == 200) {
                    $('.UpLoad').removeAttr('disabled').text('上传');
                    $('#progress_show').css('width', '0%');
                    $('.progress').css('display', 'none').delay('slow');
                    $('#lessonsId').val('');
                    $('#search').val('');
                    upload_banner_message('请求处理中', 'info');
                }
            }

            xhr.upload.onprogress = function (e) {//获取进度
                var loaded = e.loaded;
                var tot = e.total;
                var pre = Math.floor(100 * loaded / tot);
                $('.progress').css('display', 'block');
                $('.progress-bar').stop().animate({'width': pre + '%'});
            }
            xhr.open('post', "{{route('bannerUpload')}}")
            xhr.send(fd);
        }


    </script>
@stop


